<layout name="page" />
<block name="content">
	<style>
		.color3 {
			background: #1AB394;
			border-color: #1AB394;
		}
		.color2 {
			background: #1C84C6;
			border-color: #1C84C6;
		}
		.color1 {
			background: #23C6C8;
			border-color: #23C6C8;
		}
		.color4 {
			background: #ED5565;
			border-color: #ED5565;
		}
	</style>
	<input type="hidden" name='type' id='type' value="all">
	<div class="page-header">
		<h1 id="panel" class="text-center">&nbsp;</h1>
	</div>
	<div class="fc-toolbar">
		<div class="fc-left">
			<a onclick="prev();" class="btn"><i class="fa fa-chevron-left"></i></a>
			<a onclick="next();" class="btn"><i class="fa fa-chevron-right"></i></a>
			<a onclick="today();" class="btn">今天</a>
			<a onclick="month_view();" class="btn">月视图</a>
			<a onclick="add()" class="btn">新建</a>
		</div>
		<div class="fc-right">
			<a onclick="select_all();" class="btn">全部</a>
			<a onclick="select_company()" class="btn">公司</a>
			<a onclick="select_dept()" class="btn btn-success">部门</a>
			<a onclick="select_private()" class="btn btn-info">个人</a>
			<a onclick="select_actor()" class="btn btn-del">我参与的</a>
		</div>
		<div class="fc-clear"></div>
	</div><div class="fc-clear"></div>
	<div class="sub-frame">
		<div class="sub-sidebar">
			<div id="calendar" class="day_view"></div>
		</div>
		<div class="sub-content">
			<div class="ul-table">
				<ul id="ul_list" class="list-group clear-list m-t"></ul>
				<div id="sample" style="display: none;">
					<li class="list-group-item">
						<span class="label label-primary seq">5</span>
						<span class="title x1" style="padding-left:8px;cursor: pointer"></span>
						<span class="pull-right time"></span>
					</li>
				</div>
			</div>
		</div>
	</div>
</block>
<block name="js">
	<script>
		layui.use(['global'], function() {
			var $ = layui.jquery;
			set_return_url(null);
			layui.link('Public/layui/js/plugins/fullcalendar/css/fullcalendar.css');
			moment = "Public/layui/ext/fullcalendar/moment.min.js";
			fullcalendar = "Public/layui/ext/fullcalendar/fullcalendar.min.js";
			load_js(moment, function() {
				load_js(fullcalendar, function() {

					$('#calendar').fullCalendar({
						header : false,
						// header : {
						// 	left : 'prev,next today',
						// 	center : 'title',
						// 	right : 'month,agendaDay'
						// },
						titleFormat : {
							month : 'YYYY年MMMM', // September 2009
							week : "MMM d[ yyyy]{ '&#8212;'[ MMM] d yyyy}", // Sep 7 - 13 2009
							day : 'dddd, MMM d, yyyy' // Tuesday, Sep 8, 2009
						},
						firstDay : 1,
						buttonText : {
							prevYear : '去年',
							nextYear : '明年',
							today : '今天',
							month : '月',
							week : '周',
							day : '日',
							type : '3'
						},
						timeFormat : 'H:mm',
						dayNamesShort : ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
						monthNames : ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
						eventDrop : function(event, delta, revertFunc) {
							alert(event.title + " was dropped on " + event.start.format());
							if (!confirm("Are you sure about this change?")) {
								revertFunc();
							}
						},
						eventAfterAllRender : function(view) {
							$('#panel').html(view.title);
						},
						eventClick : function(event, jsEvent, view) {
							winopen('{:url("read")}&id=' + event.id, 560, 470);
						},
						events : function(start, end, timezone, callback) {
							$.ajax({
								url : '{:url("json")}',
								dataType : 'json',
								data : {
									// our hypothetical feed requires UNIX timestamps
									start_date : start.format('YYYY-MM-DD'),
									end_date : end.format('YYYY-MM-DD'),
									type : $('#type').val(),
								},
								success : function(doc) {
									$("#ul_list").empty();
									var events = [];
									var $i = 0;

									for (var s in doc) {
										$i++;
										$("#test").append(doc[s].start_time + ":" + doc[s].name);

										$html = $("#sample").clone();
										if ($i == 1) {
											$("li", $html).addClass('fist-item');
										}
										$('.title', $html).text(doc[s].name);
										$('.title', $html).attr('id', doc[s].id);
										$('.seq', $html).text($i);
										$('.time', $html).text(doc[s].start_time.substr(0, 16));

										$("#ul_list").append($html.html());

										events.push({
											id : doc[s].id,
											title : doc[s].name,
											className : 'color' + doc[s].type,
											start : doc[s].start_time, // will be parsed
											end : doc[s].end_time // will be parsed
										});
									}
									callback(events);
								}
							});
						}
					});
				});
			});

			$('#btn_next').on('click', function() {
				$('#calendar').fullCalendar('next');
			});

			$('#btn_prev').on('click', function() {
				$('#calendar').fullCalendar('prev');
			});

			$('#btn_today').on('click', function() {
				$('#calendar').fullCalendar('today');
			});

			$('#day_view').on('click', function() {
				console.log('view');
				window.open("{:url('day_view')}", "_self");
			});

			$('#btn_add').on('click', function() {
				window.open("{:url('add')}", "_self");
			});
		});

		function next() {
			$('#calendar').fullCalendar('next');
		}

		function prev() {
			$('#calendar').fullCalendar('prev');
		}

		function today() {
			$('#calendar').fullCalendar('today');
		}

		function add() {
			window.open("{:url('add')}", "_self");
		}

		function month_view() {
			window.open('{:url("index")}', "_self");
		}

		function day_view() {
			window.open("{:url('day_view')}", "_self");
		}

		function select_all() {
			$('#type').val('all');
			$('#calendar').fullCalendar('refetchEvents');
		}

		function select_company() {
			$('#type').val('company');
			$('#calendar').fullCalendar('refetchEvents');
		}

		function select_dept() {
			$('#type').val('dept');
			$('#calendar').fullCalendar('refetchEvents');
		}

		function select_private() {
			$('#type').val('private');
			$('#calendar').fullCalendar('refetchEvents');
		}

		function select_actor() {
			$('#type').val('actor');
			$('#calendar').fullCalendar('refetchEvents');
		}


		$(document).on("click", "#ul_list .title", function() {
			$id = $(this).attr('id');
			winopen('{:url("read")}?id=' + $id, 560, 470);
		});

		$(document).ready(function() {
			set_return_url(null);
			$('#calendar').fullCalendar({
				header : false,
				titleFormat : {
					month : 'YYYY年MMMM', // September 2009
					week : "MMM d[ yyyy]{ '&#8212;'[ MMM] d yyyy}", // Sep 7 - 13 2009
					day : 'dddd, MMM d, yyyy' // Tuesday, Sep 8, 2009
				},
				aspectRatio : 1,
				firstDay : 1,
				buttonText : {
					prevYear : '去年',
					nextYear : '明年',
					today : '今天',
					month : '月',
					week : '周',
					day : '日'
				},
				timeFormat : 'H:mm',
				dayNamesShort : ['日', '一', '二', '三', '四', '五', '六'],
				monthNames : ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				eventDrop : function(event, delta, revertFunc) {
					alert(event.title + " was dropped on " + event.start.format());
					if (!confirm("Are you sure about this change?")) {
						revertFunc();
					}
				},
				eventAfterAllRender : function(view) {
					$('#panel').html(view.title);
				},
				eventClick : function(event, jsEvent, view) {
					winopen('{:url("read")}?id=' + event.id, 560, 470);
				},
				events : function(start, end, timezone, callback) {
					$.ajax({
						url : '{:url("json")}',
						dataType : 'json',
						data : {
							// our hypothetical feed requires UNIX timestamps
							start_date : start.format('YYYY-MM-DD'),
							end_date : end.format('YYYY-MM-DD'),
							type : $("#type").val(),
						},
						success : function(doc) {
							$("#ul_list").empty();
							var events = [];
							var $i = 0;
							for (var s in doc) {
								$i++;
								$("#test").append(doc[s].start_time + ":" + doc[s].name);

								$html = $("#sample").clone();
								if ($i == 1) {
									$("li", $html).addClass('fist-item');
								}
								$('.title', $html).text(doc[s].name);
								$('.title', $html).attr('id', doc[s].id);
								$('.seq', $html).text($i);
								$('.time', $html).text(doc[s].start_time.substr(0, 16));

								$("#ul_list").append($html.html());

								events.push({
									id : doc[s].id,
									title : doc[s].name,
									className : 'color' + doc[s].type,
									start : doc[s].start_time, // will be parsed
									end : doc[s].end_time // will be parsed
								});
							}
							callback(events);
						}
					});
				}
			});
		});

	</script>
</block>
